<template>
    <div class="main min-h-screen flex flex-col">
        <WikiHeader :catalogs="catalogs"></WikiHeader>
        <main class="grow container max-w-screen-3xl mx-auto px-4 sm:px-6 md:px-8 py-4">
            <!-- 左边栏 -->
            <div class="hidden lg:block fixed inset-0 top-[6rem] 
                pb-10 pr-6 overflow-y-auto"
                :class="[isExpand ? 'left-[max(0px,calc(50%-48rem))] w-[25rem] pl-8' : 'left-0 w-0 pl-0 2xl:left-[max(0px,calc(50%-50rem))] 2xl:w-[25rem] 2xl:pl-8']">
                <div class="flex">
                    <div class="grow" :class="[isExpand ? 'block' : 'hidden 2xl:block']">
                        <div>
                            <h2
                                class="flex pt-6 text-lg text-gary-800 text-justify font-bold items-center dark:text-gray-400">
                                <svg t="1733498001787" class="icon w-8 h-8 mr-2 inline" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17153" width="200"
                                    height="200">
                                    <path d="M224 97.031L600.008 97C798.826 97 960 257.591 960 455.69v471.279L224 927z"
                                        fill="#FFFFFF" p-id="17154"></path>
                                    <path d="M64 146.82L224 97v830H64z" fill="#A5CAFC" p-id="17155"></path>
                                    <path
                                        d="M400 464m50 0l280 0q50 0 50 50l0 0q0 50-50 50l-280 0q-50 0-50-50l0 0q0-50 50-50Z"
                                        fill="#4378E0" p-id="17156"></path>
                                    <path
                                        d="M400 674m50 0l280 0q50 0 50 50l0 0q0 50-50 50l-280 0q-50 0-50-50l0 0q0-50 50-50Z"
                                        fill="#4378E0" p-id="17157"></path>
                                    <path
                                        d="M400 254m50 0l280 0q50 0 50 50l0 0q0 50-50 50l-280 0q-50 0-50-50l0 0q0-50 50-50Z"
                                        fill="#4378E0" p-id="17158"></path>
                                </svg>
                                知识库目录
                            </h2>
                        </div>
                        <div id="accordion-flush" data-accordion="collapse" class="pt-5 last:pb-[170px]"
                            data-active-classes="bg-white dark:bg-[#0d1117] dark:text-gray-300"
                            data-inactive-classes="">
                            <div v-for="(catalog, index) in catalogs" :key="index">
                                <h2 :id="'accordion-flush-heading-' + catalog.id">
                                    <button type="button" class="hover:bg-gray-100 text-lg flex items-center justify-between w-full py-3 px-3 rounded-lg 
                            font-medium rtl:text-right text-gray-500 dark:text-gray-400 gap-3 dark:hover:bg-gray-800"
                                        :data-accordion-target="'#accordion-flush-body-' + catalog.id"
                                        :aria-expanded="[catalog.children && catalog.children.some(item => item.articleId == route.query.articleId) ? true : false]"
                                        :aria-controls="'accordion-flush-body-' + catalog.id">
                                        <span class="font-semibold" v-html="catalog.title"></span>
                                        <!-- 箭头 -->
                                        <svg data-accordion-icon class="w-3 h-3 rotate-90 transition-all shrink-0"
                                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                            viewBox="0 0 10 6">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2" d="M9 5 5 1 1 5" />
                                        </svg>
                                    </button>
                                </h2>
                                <ul :id="'accordion-flush-body-' + catalog.id" class="hidden"
                                    :aria-labelledby="'accordion-flush-heading-' + catalog.id">
                                    <li v-for="(childCatalog, childIndex) in catalog.children" :key="childIndex"
                                        @click="goWikiDetailPage(childCatalog.articleId)" v-html="childCatalog.title"
                                        class="flex items-center text-base font-medium ps-10 py-2 pe-3 rounded-lg cursor-pointer 
                                    dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
                                        :class="childCatalog.articleId && childCatalog.articleId == route.query.articleId ? 'bg-gray-100 text-sky-600 font-semibold dark:bg-gray-800' : ''">
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <!-- 点击收缩、展开 -->
                    <div class="hidden transition-all md:inline-block 2xl:hidden pl-3" @click="shrinkAndExpand">
                        <div id="left-toc-sidebar" class="left-toc-sidebar top-[6rem]">
                            <span id="left-toc-sidebar-arrow"
                                class="arrow start flex items-center justify-center"
                                :class="[isExpand ? '-rotate-90' : 'rotate-90']">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间栏 -->
            <div class="transition-all duration-300" :class="[isExpand ? 'lg:pl-[22.5rem] 2xl:pl-[25rem]' : 'lg:pl-0 2xl:pl-[25rem]']">
                <div class="max-w-3xl mx-auto pt-5 xl:max-w-none xl:ml-0 xl:mr-[15.5rem] xl:pr-16">
                    <!-- 文章卡片父容器 -->
                    <!-- 文章 -->
                    <article>
                        <!-- 文章标题 -->
                        <h1 class="font-bold text-xl dark:text-gray-300 md:text-3xl">{{ article.title }}</h1>
                        <!-- 文章 meta 信息，如发布时间等 -->
                        <div class="text-gray-400 flex items-center mt-5 text-sm">
                            <!-- 字数 -->
                            <div class="flex items-center mr-2" data-tooltip-target="word-tooltip-bottom"
                                data-tooltip-placement="bottom">
                                <svg t="1701512226243" class="w-4 h-4 mr-1 icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="28617" width="48" height="48">
                                    <path
                                        d="M682.666667 85.333333l213.333333 213.333334v597.674666a42.368 42.368 0 0 1-42.368 42.325334H170.368A42.666667 42.666667 0 0 1 128 896.341333V127.658667C128 104.277333 146.986667 85.333333 170.368 85.333333H682.666667z m-85.333334 256v212.864L512 469.333333l-84.906667 85.333334L426.666667 341.333333H341.333333v341.333334h85.333334l85.333333-85.333334 85.333333 85.333334h85.333334V341.333333h-85.333334z"
                                        p-id="28618" fill="#8a8a8a"></path>
                                </svg>
                                <span class="hidden text-sm md:inline">字数约</span> <span class="text-xs md:text-sm">{{
                                    article.totalWords }}字</span>
                            </div>
                            <div class="flex items-center mr-2" data-tooltip-target="read-time-tooltip-bottom"
                                data-tooltip-placement="bottom">
                                <svg t="1701512553358" class="w-4 h-4 mr-1.5 icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="37812" width="48" height="48">
                                    <path
                                        d="M513 33.22c-265.1 0-480 214.9-480 480s214.9 480 480 480 480-214.9 480-480-214.9-480-480-480z m208.9 652.59c-11.05 19.13-35.51 25.69-54.64 14.64L474.1 588.93c-13.06-7.54-20.26-21.34-19.99-35.42 0-0.17-0.01-0.34-0.01-0.51V329.95c0-22.09 17.91-40 40-40s40 17.91 40 40v201.23l173.17 99.98c19.12 11.05 25.68 35.51 14.63 54.65z"
                                        fill="#8a8a8a" p-id="37813"></path>
                                </svg>
                                <span class="hidden text-sm md:inline">预计时长</span><span class="text-xs md:text-sm">{{
                                    article.readTime }}</span>
                            </div>
                            <!-- 发布时间 -->
                            <svg class="inline w-3 h-3 mr-2 dark:text-gray-400 hidden md:inline" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                            </svg>
                            <span class="hidden text-sm md:inline mr-1">首发于</span>
                            <span class="hidden text-xs mr-1 md:text-sm md:inline">{{ article.createTime }}</span>

                            <!-- 分类 -->
                            <svg class="inline w-3 h-3 mr-1 md:ml-2 md:mr-2 dark:text-gray-400" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H1Z" />
                            </svg>
                            <span class="hidden text-sm md:inline mr-1">分类于</span>
                            <a @click="goCategoryArticleList(article.categoryId, article.categoryName)"
                                class="hover:underline text-xs mr-1 md:text-sm">{{ article.categoryName }}</a>

                            <!-- 阅读量 -->
                            <svg class="inline w-3 h-3 mr-1 md:ml-2 md:mr-2 dark:text-gray-400" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 14">
                                <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2">
                                    <path d="M10 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
                                    <path d="M10 13c4.97 0 9-2.686 9-6s-4.03-6-9-6-9 2.686-9 6 4.03 6 9 6Z" />
                                </g>
                            </svg>
                            <span class="hidden text-sm md:inline mr-1">阅读量</span>
                            <span class="text-xs mr-1 md:text-sm">{{ article.readNum }}</span>
                        </div>
                    </article>

                    <!-- 摘要 -->
                    <div
                        class="text-sm/[30px] w-full p-3 py-3 mt-8 bg-sky-100 border-2 border-sky-500 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <!-- 摘要标题 -->
                        <h2 class="flex items-center mb-2 font-bold text-sky-800 uppercase dark:text-gray-400 text-lg">
                            <!-- 摘要图标 -->
                            <svg t="1730435895732" class="icon w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5943" width="200" height="200">
                                <path
                                    d="M609.827 583.867L223.327 238.9s-0.964 6.109 51.173 65.911c80.732 92.6 254.708 250.671 335.331 336.55 39.769 42.361 27.522 57.674 27.607 57.494l-469.33-287.473-27.608-57.495h-27.607s-40.021-32.437-55.215-57.492c-42.106-69.414-27.606-114.99-27.606-114.99l55.215 28.747-27.609-86.237s101.228-57.5 220.859 57.49c0 0 1.855 5.791 4.6 14.374 7.855 24.536 50.615 71.866 50.615 71.866L306.145 152.66l110.427 114.985 68.12 42.224V152.66l14.7-57.5 496.94 172.485c-59.61 584.587-496.935 661.188-496.935 661.188L57.678 698.855l220.859-172.483 68.635 17.071-174.676 150.186 333.458 137.2s374.98-52.116 392.3-529.21l-353.07-117.604v137.2l-45.787 3.922z"
                                    fill="#406EB4" p-id="5944"></path>
                            </svg>
                            文章摘要
                        </h2>

                        <div v-if="article.summary && article.summary != ''"
                            class="text-base text-sky-600 indent-8 font-serif dark:text-gray-300">
                            {{ article.summary }}
                        </div>
                        <div v-else class="text-base text-sky-600 indent-8 font-serif dark:text-gray-300">
                            该文章暂时还没有添加摘要哦！
                        </div>
                    </div>

                    <!-- 正文 -->
                    <div :class="{ 'dark': isDark }">
                        <div id="content" ref="articleContentRef" class="mt-5 article-content" v-viewer
                            v-html="article.content"></div>
                        <!-- <div class="mt-5">
                        <MdPreview :editorId="id" :modelValue="text" :preview-theme="mdPreviewTheme" />
                        <MdCatalog :editorId="id" :scrollElement="scrollElement" />
                        </div> -->
                    </div>
                    <div class="text-gray-400 flex items-center mt-5 text-sm">
                        <!-- 更新时间 -->
                        <svg class="inline w-3 h-3 ml-1 mr-2 dark:text-white" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
                        </svg>
                        <span class="hidden md:inline mr-1">最后编辑时间为</span>
                        <span class="md:inline mr-1">{{ article.updateTime }}</span>
                    </div>
                    <!-- 标签集合 -->
                    <div class="mt-5">
                        <span v-for="(tag, index) in article.tags" :key="index"
                            @click="goTagArticlePageList(tag.id, tag.name)"
                            class="inline-block mb-1 cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300">
                            # {{ tag.name }}
                        </span>
                    </div>

                    <!-- 上下篇 -->
                    <nav class="flex flex-row mt-7">
                        <!-- basis-1/2 用于占用 flex 布局的一半空间 -->
                        <div class="basis-1/2">
                            <!-- h-full 指定高度占满 -->
                            <a v-if="context && context.preArticle"
                                @click="goWikiDetailPage(context.preArticle.articleId)"
                                class="flex flex-col h-full p-4 mr-3 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-sky-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                <div>
                                    <svg class="inline w-3.5 h-3.5 mr-2 mb-1" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M13 5H1m0 0 4 4M1 5l4-4"></path>
                                    </svg>
                                    上一篇
                                </div>
                                <div>{{ context.preArticle.title }}</div>
                            </a>
                            <div v-else> 到顶了，前面没有文章了！ </div>
                        </div>

                        <div class="basis-1/2">
                            <!-- text-right 指定文字居右显示 -->
                            <a v-if="context && context.nextArticle"
                                @click="goWikiDetailPage(context.nextArticle.articleId)"
                                class="flex flex-col h-full text-right p-4 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:border-sky-500 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                <div>
                                    下一篇
                                    <svg class="inline w-3.5 h-3.5 ml-2 mb-1" aria-hidden="true"
                                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
                                    </svg>
                                </div>
                                <div>{{ context.nextArticle.title }}</div>
                            </a>
                            <div v-else> 到底了，后面没有文章了！ </div>
                        </div>
                    </nav>
                    <Comment></Comment>
                </div>
            </div>
            <!-- 右边栏 -->
            <div
                class="fixed top-[6rem] bottom-0 right-[max(0px,calc(50%-50rem))] w-[21.5rem] py-5 overflow-y-auto hidden xl:block flex flex-col">
                <WikiArticleToc></WikiArticleToc>
            </div>
        </main>
        <ScrollToTopButton></ScrollToTopButton>
        <WikiFooter></WikiFooter>
    </div>
</template>

<script setup>
import WikiHeader from '@/layouts/frontend/components/WikiHeader.vue';
import WikiFooter from '@/layouts/frontend/components/WikiFooter.vue';
import Comment from '@/components/Comment.vue';
import WikiArticleToc from '@/layouts/frontend/components/WikiArticleToc.vue';
import UserInfoCard from './components/UserInfoCard.vue';
import CategoryCard from './components/CategoryCard.vue';
import TagCard from './components/TagCard.vue';
import ScrollToTopButton from './components/ScrollToTopButton.vue';
import Toc from './components/Toc.vue';
import { useRouter, useRoute } from 'vue-router';
import { ref, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import { getArticleDetail } from '@/api/frontend/article';
import { showMessage } from '@/composables/utils';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import hljs from 'highlight.js'
import { useDark } from '@vueuse/core';
import { 
    initAccordions, 
} from 'flowbite'

// 代码高亮样式
import 'highlight.js/styles/mono-blue.css'
// 流程图
import mermaid from 'mermaid';
import { getWikiArticleContext, getWikiCatalogList } from '@/api/frontend/wiki';
const globalProperties = getCurrentInstance().appContext.config.globalProperties
const mathJax = globalProperties.mathJax
const isDark = useDark()

const id = 'preview-only';
const text = ref('');
const scrollElement = document.documentElement;
// md编辑器预览样式
const mdPreviewTheme = ref("smart-blue")

const router = useRouter()
const route = useRoute()

onMounted(() => {
    getWikiCatalogData(route.params.wikiId)
})

// 目录是否展开，默认为 true
const isExpand = ref(true)
// 点击收缩、展开
const shrinkAndExpand = () => {
    isExpand.value = !isExpand.value
}

const catalogs = ref([])

// 获取知识库目录
const getWikiCatalogData = (wikiId) => {
    if (wikiId == null) {
        showMessage('知识库id不能为空', 'error')
        return
    }
    // 构造请求体
    let params = {
        "id": wikiId
    }
    // 获取知识库目录
    getWikiCatalogList(params).then((res) => {
        if (res.success == true) {
            catalogs.value = res.data
            // 获取数据成功后，初始化 Accordions 组件
            nextTick(() => initAccordions())
        } else {
            showMessage(res.message, 'error')
        }
    })
}
getWikiCatalogData(route.params.wikiId)

// 打印文章id
console.log(route.query.articleId)

// 分类跳转
const goCategoryArticleList = (id, name) => {
    router.push({path: '/category/article/list', query: {id: id, name: name}})
}
// 标签跳转
// 跳转到标签文章列表页
const goTagArticlePageList = (id, name) => {
    router.push({path: '/tag/article/list', query: {id: id, name: name}})
}

// 文章数据
const article = ref({})
// 上下文
const context = ref(null)
// 获取文章详情
const refreshArticleDetail = (articleId) => {
    if (articleId == null) {
        // 该目录对应的文章不存在
        return
    }
    //构造文章详情参数
    let params = {
        "articleId": articleId
    }
    getArticleDetail(params).then((res) => {
        if (res.success == true) {
            article.value = res.data
            text.value = res.data.content

            nextTick(() => {
                // 获取pre code 节点
                let highlight = document.querySelectorAll('pre code:not(.language-mermaid)')
                // 循环高亮
                highlight.forEach((block) => {
                    block.parentElement.className = 'pre-h'
                    // 因为默认不支持vue 所以检测到vue 使用html代替
                    if (block.className == 'language-vue') block.className = 'language-html'
                    hljs.highlightBlock(block)
                })

                // 实现代码复制
                // 获取所有的 pre-h class 节点
                let preElements = document.querySelectorAll('.pre-h')
                preElements.forEach(preElement => {
                    // 找到第一个 code 元素
                    let firstCode = preElement.querySelector('code');
                    if (firstCode) {
                        let copyCodeBtn = '<button class="hidden copy-code-btn flex items-center justify-center"><div class="copy-icon"></div></button>'
                        firstCode.insertAdjacentHTML('beforebegin', copyCodeBtn);
                        // 获取刚插入的按钮
                        let copyBtn = firstCode.previousSibling;
                        copyBtn.addEventListener('click', () => {
                            // 添加 copied 样式
                            copyBtn.classList.add('copied');
                            copyToClipboard(preElement.textContent)
                            // 1.5 秒后移除 copied 样式
                            setTimeout(() => {
                                copyBtn.classList.remove('copied');
                            }, 1500);
                        });
                    }
                    // 添加事件监听器
                    preElement.addEventListener('mouseenter', handleMouseEnter);
                    preElement.addEventListener('mouseleave', handleMouseLeave);
                })
            })
            // 复制内容到剪切板
            function copyToClipboard(text) {
                const textarea = document.createElement('textarea');
                textarea.value = text;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
            }
            const handleMouseEnter = (event) => {
                // 鼠标移入，显示按钮
                let copyBtn = event.target.querySelector('button');
                if (copyBtn) {
                    copyBtn.classList.remove('hidden');
                    copyBtn.classList.add('block');
                }
            }

            const handleMouseLeave = (event) => {
                // 鼠标移出，隐藏按钮
                let copyBtn = event.target.querySelector('button');
                if (copyBtn) {
                    copyBtn.classList.add('hidden');
                }
            }
        } else if (res.success == false && res.code == '4011') {
            //文章不存在 后端返回code为4011
            // 手动跳转404页面
            router.push({name: 'NotFound'})
        } else {
            showMessage(res.message, 'error')
        }
    })
    // 构造知识库上下文参数
    params = {
        "articleId": articleId,
        "wikiId": route.params.wikiId
    }
    // 获取知识库上下文数据
    getWikiArticleContext(params).then((res) => {
        if (res.success == true) {
            context.value = res.data
            // console.log(context.value)
        }
    })
}
refreshArticleDetail(route.query.articleId)

// 跳转到知识库文章目录详情页
const goWikiDetailPage = (articleId) => {
    router.push({path: '/wiki/detail/' + route.params.wikiId, query: {articleId: articleId}})
}
// 监听路由改变则刷新页面数据
watch(route, (newRoute, oldRoute) => {
    getWikiCatalogData(route.params.wikiId)
    refreshArticleDetail(route.query.articleId)
})

// 正文文章引用
const articleContentRef = ref(null)
// onMounted(() => {
//     // console.log(hljs.listLanguages())
//     //使用MutationObserver来监视 Dom 变化
//     const observer = new MutationObserver(mutationsList => {
//         for (let mutation of mutationsList) {
//             if (mutation.type == 'childList') {
//                 // 获取pre code 节点
//                 let highlight = document.querySelectorAll('pre code:not(.language-mermaid)')
//                 // 循环高亮
//                 highlight.forEach((block) => {
//                     block.parentElement.className = 'pre-h'
//                     // 因为默认不支持vue 所以检测到vue 使用html代替
//                     if (block.className == 'language-vue') block.className = 'language-html'
//                     hljs.highlightBlock(block)
//                 })
//             }
//         }
//     })

//     // 监视子节点变化
//     const config = { childList: true, subtree: true }
//     // 观察变化
//     observer.observe(articleContentRef.value, config)
// })

// 转换math公式
onMounted(() => {
    mathJax.TypeSet([document.getElementById('content')])
})

watch(() => article.value, () => mathJax.TypeSet([document.getElementById('content')]))

onMounted(async () => {
    // 初始化流程图
    console.log('init mermaid')
    mermaid.initialize({ startOnLoad: false, securityLevel: "loose" })
    //使用MutationObserver来监视 Dom 变化
    const observer = new MutationObserver(async mutationsList => {
        for (let mutation of mutationsList) {
            if (mutation.type == 'childList') {
                // 获取pre code 节点
                let drawNodes = document.querySelectorAll('.language-mermaid,.mermaid')
                await drawDiagram(drawNodes)
            }
        }
    })

    // 监视子节点变化
    const config = { childList: true, subtree: true }
    // 观察变化
    observer.observe(articleContentRef.value, config)
})

// 配置mermaid
const drawDiagram = async (element) => {
    // console.log('element:', element)
    await mermaid.run({
        nodes: element
    })
}
</script>

<style scoped>
.main {
    background-color: #fff;
}

/* 暗黑主题的背景色 */
.dark .main {
    background-color: #0d1117;
}

/* 收缩、展开相关样式 */
.left-toc-sidebar {
    position: fixed;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    transition: left .3s ease;
}

.left-toc-sidebar:hover {
    background: rgba(127, 127, 127, .05);
    cursor: pointer;
}

/* 箭头 */
.left-toc-sidebar .arrow {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
    line-height: normal;
    transition: all .3s;
}

/* 暗黑主题下箭头 */
html[class=dark] .left-toc-sidebar .arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}
/* h1, h2, h3, h4, h5, h6 标题样式 */
::v-deep(.article-content h1,
.article-content h2, 
.article-content h3, 
.article-content h4, 
.article-content h5, 
.article-content h6) {
    /* color: #292525; */
    line-height: 150%;
    font-family: PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}

::v-deep(.article-content h1) {
    line-height: 1.5;
    font-weight: 700;
    font-synthesis: style;
    font-size: 25px;
    margin-top: 40px;
    margin-bottom: 26px;
    line-height: 140%;
    border-bottom: 1px solid rgb(241 245 249);
    padding-bottom: 15px;
}

::v-deep(.article-content h2) {
    line-height: 1.5;
    font-weight: 700;
    font-synthesis: style;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 26px;
    line-height: 140%;
    border-bottom: 1px solid rgb(241 245 249);
    padding-bottom: 15px;
}

::v-deep(.article-content h3) {
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 16px;
    font-weight: 600;
}

::v-deep(.article-content h4) {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 16px;
    font-weight: 600;
}

::v-deep(.article-content h5) {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 14px;
    font-weight: 600;
}

::v-deep(.article-content h6) {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 14px;
    font-weight: 600;
}

/* p 段落样式 */
::v-deep(.article-content p) {
    letter-spacing: .3px;
    margin: 0 0 20px;
    line-height: 30px;
    color: #4c4e4d;
    font-weight: 400;
    word-break: normal;
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

/* blockquote 引用样式 */
::v-deep(.article-content blockquote) {
    border-left: 2.3px solid rgb(52, 152, 219);
    quotes: none;
    background: rgb(236, 240, 241);
    color: #777;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 24px;
}

/* 设置 blockquote 中最后一个 p 标签的 margin-bottom 为 0 */
::v-deep(.article-content blockquote p:last-child) {
    margin-bottom: 0;
}

/* 斜体样式 */
::v-deep(.article-content em) {
    color: #c849ff;
}

/* 超链接样式 */
::v-deep(.article-content a) {
    color: #167bc2;
}

::v-deep(.article-content a:hover) {
    text-decoration: underline;
}

/* ul 样式 */
::v-deep(.article-content ul) {
    padding-left: 2rem;
}

::v-deep(.article-content > ul) {
    margin-bottom: 20px;
}

::v-deep(.article-content ul li) {
    list-style-type: disc;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
}

::v-deep(.article-content ul li p) {
    margin-bottom: 0!important;
}

::v-deep(.article-content ul ul li) {
    list-style-type: square;
}
/* ol 样式 */
::v-deep(.article-content ol) {
    list-style-type: decimal;
    padding-left: 2rem;
}

/* 图片样式 */
::v-deep(.article-content img) {
    max-width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

::v-deep(.article-content img:hover,
img:focus) {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .15);
}

/* 图片描述文字 */
::v-deep(.image-caption) {
    min-width: 20%;
    max-width: 80%;
    min-height: 43px;
    display: block;
    padding: 10px;
    margin: 0 auto;
    font-size: 13px;
    color: #999;
    text-align: center;
}

/* code 样式 */
::v-deep(.article-content code:not(pre code)) {
    padding: 2px 4px;
    margin: 0 2px;
    font-size: 95% !important;
    border-radius: 4px;
    color: rgb(41, 128, 185);
    background-color: rgba(27, 31, 35, 0.05);
    font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* pre code 样式 代码段添加小三点样式 */
::v-deep(code) {
    font-size: 98%;
}

::v-deep(pre code) {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.7rem;
    border-radius: 6px;
}
/* pre 样式 */
::v-deep(.pre-h) {
    margin-bottom: 20px;
    padding-top: 30px;
    background: rgba(232.8, 233.4, 234.6, 0.5);
    border-radius: 6px;
    position: relative;
}

::v-deep(pre code.hljs) {
    padding: 0.7rem 1rem;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

::v-deep(.pre-h:before) {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 10px;
    margin-top: -19px;
    margin-left: 10px;
    position: absolute;
    width: 10px;
}

::v-deep(pre code.language-mermaid) {
    /* padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.7rem;
    border-radius: 6px; */

    display: flex;
    justify-items: center;
    justify-content: center;
}

/* 表格样式 */
::v-deep(table) {
    margin-bottom: 20px;
    width: 100%;
}

::v-deep(table tr) {
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
}

::v-deep(table th) {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

::v-deep(table td) {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

::v-deep(table tr:nth-child(2n)) {
    background-color: #f6f8fa;
}

/* hr 横线 */
::v-deep(hr) {
    margin-bottom: 20px;
}
/* 代码复制按钮样式 */
::v-deep(.copy-code-btn) {
    border-width: 0;
    cursor: pointer;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 5;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 0.5rem;
    opacity: 0;
    transition: opacity .4s;
    opacity: 1
}

::v-deep(.copy-code-btn:hover) {
    background: rgba(177.3, 179.4, 183.6, 0.8);
}

::v-deep(.copy-icon) {
    --copy-icon: url("data:image/svg+xml,%3Csvg t='1730889860175' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='23860' width='20' height='20'%3E%3Cpath d='M96.1 575.7a32.2 32.1 0 1 0 64.4 0 32.2 32.1 0 1 0-64.4 0Z' fill='%23ffffff' p-id='23861'%3E%3C/path%3E%3Cpath d='M742.1 450.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.1 26-13.8 26-31s-11.7-31.3-26-31.4zM742.1 577.7l-269.5-2.1c-14.3-0.1-26 13.8-26 31s11.7 31.3 26 31.4l269.5 2.1c14.3 0.2 26-13.8 26-31s-11.7-31.3-26-31.4z' fill='%23ffffff' p-id='23862'%3E%3C/path%3E%3Cpath d='M736.1 63.9H417c-70.4 0-128 57.6-128 128h-64.9c-70.4 0-128 57.6-128 128v128c-0.1 17.7 14.4 32 32.2 32 17.8 0 32.2-14.4 32.2-32.1V320c0-35.2 28.8-64 64-64H289v447.8c0 70.4 57.6 128 128 128h255.1c-0.1 35.2-28.8 63.8-64 63.8H224.5c-35.2 0-64-28.8-64-64V703.5c0-17.7-14.4-32.1-32.2-32.1-17.8 0-32.3 14.4-32.3 32.1v128.3c0 70.4 57.6 128 128 128h384.1c70.4 0 128-57.6 128-128h65c70.4 0 128-57.6 128-128V255.9l-193-192z m0.1 63.4l127.7 128.3H800c-35.2 0-64-28.8-64-64v-64.3h0.2z m64 641H416.1c-35.2 0-64-28.8-64-64v-513c0-35.2 28.8-64 64-64H671V191c0 70.4 57.6 128 128 128h65.2v385.3c0 35.2-28.8 64-64 64z' fill='%23ffffff' p-id='23863'%3E%3C/path%3E%3C/svg%3E");
    background: currentcolor;
    -webkit-mask-image: var(--copy-icon);
    mask-image: var(--copy-icon);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1em;
    mask-size: 1em;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.625rem;
    color: #9e9e9e;
    font-size: 1.25rem;
}
::v-deep(.copied) {
    display: flex;
    background: rgba(224.6, 242.8, 215.6, 0.8);
}

::v-deep(.copied:after) {
    content: "已复制";
    position: absolute;
    top: 0;
    right: calc(100% + .25rem);
    display: block;
    height: 2.5rem;
    padding: .625rem;
    border-radius: .5rem;
    background: rgba(224.6, 242.8, 215.6, 0.8);
    color: rgb(148.6, 212.3, 117.1);
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

::v-deep(.copied .copy-icon) {
    --copied-icon: url("data:image/svg+xml,%3Csvg t='1730888376667' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='9270' width='20' height='20'%3E%3Cpath d='M512 68.266667C267.093333 68.266667 68.266667 267.093333 68.266667 512s198.826667 443.733333 443.733333 443.733333 443.733333-198.826667 443.733333-443.733333S756.906667 68.266667 512 68.266667m0-68.266667c282.453333 0 512 229.546667 512 512s-229.546667 512-512 512S0 794.453333 0 512 229.546667 0 512 0z' fill='%235EB549' p-id='9271'%3E%3C/path%3E%3Cpath d='M436.906667 697.173333c-11.093333 0-22.186667-4.266667-29.866667-12.8L264.533333 542.72c-17.066667-16.213333-17.066667-43.52 0-60.586667 16.213333-17.066667 43.52-17.066667 60.586667 0l114.346667 113.493334 273.92-239.786667c17.92-15.36 44.373333-13.653333 60.586666 4.266667 15.36 17.92 13.653333 44.373333-4.266666 60.586666L465.92 686.933333c-8.533333 6.826667-18.773333 10.24-29.013333 10.24z' fill='%235EB549' p-id='9272'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: var(--copied-icon);
    mask-image: var(--copied-icon);
    color: rgb(148.6, 212.3, 117.1);
}

/* h1, h2, h3, h4, h5, h6 标题样式 */
::v-deep(.dark .article-content h1) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity));
    border-bottom: 1px solid;
    border-color: rgb(31 41 55 / 1);
}

::v-deep(.dark .article-content h2) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
    border-bottom: 1px solid;
    border-color: rgb(31 41 55 / 1);
}

::v-deep(.dark .article-content h3) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

::v-deep(.dark .article-content h4) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

::v-deep(.dark .article-content h5) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

::v-deep(.dark .article-content h6) {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}


/* p 段落样式 */
::v-deep(.dark .article-content p) {
    color: #9e9e9e;
}

/* blockquote 引用样式 */
::v-deep(.dark .article-content blockquote) {
    quotes: none;
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
    border-left: 2.3px solid #555;
    color: #666;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0.25rem 0 0.25rem 1rem;
}

/* ul 样式 */
::v-deep(.dark .article-content ul) {
    padding-left: 2rem;
    color: #9e9e9e;
}

/* ol 样式 */
::v-deep(.dark .article-content ol) {
    color: #9e9e9e;
}

/* code 样式 */
::v-deep(.dark .article-content code:not(pre code)) {
    padding: 2px 4px;
    margin: 0 2px;
    font-size: .85em;
    border-radius: 5px;
    color: #abb2bf;
    background: #333;
    /* background-color: rgba(27, 31, 35, 0.05); */
    font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
::v-deep(.dark table tr) {
    background-color: rgb(31 41 55 / 1);
}

::v-deep(.dark table) {
    color: #9e9e9e;
}

::v-deep(.dark table th) {
    border: 1px solid #394048;
}

::v-deep(.dark table td) {
    border: 1px solid #394048;
}

::v-deep(.dark table tr:nth-child(2n)) {
    background-color: rgb(21 41 55 / 1);
}

/* hr 横线 */
::v-deep(.dark hr) {
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity));
}

.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
</style>
